<template>
  <div class="all">
     <img class="gps" src="~assets/img/profile/gps.png" />
     <div class="info">
       <div class="up">
         <span class="name">{{name}}</span>
         <span class="tel">{{tel}}</span>
       </div>
       <div class="down">
         <span class="address">{{address}}</span>
       </div>
     </div>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
          name:"1",
          tel:"123",
          address:"123"
       }
    },
    methods:{

    },
    components:{

    },
    activated() {
      let user=JSON.parse(window.sessionStorage.user)
      this.name=user.username
      this.tel=user.tel
      this.address=user.address
      // this.$bus.$on("addressChange",res=>{
      //   console.log('address',res.username);
      //   this.name=res.username
      //   this.tel=res.tel
      //   this.address=res.address
      //   console.log('address2',this.name);
      // })
      this.nextTick(function () {
        this.$bus.$on("addressChange",res=>{
          console.log('address',res.username);
          this.name=res.username
          this.tel=res.tel
          this.address=res.address
          console.log('address2',this.name);
        })
      })
    }
  }
</script>

<style scoped>
  .all{
    border-radius: 5%;
    display: flex;
    width: 90%;
    padding-top: 10px;
    padding-bottom: 20px;
    background-color: white;
  }
  .gps{
    flex: 1;
    height: 55px;
    margin-left: 10px;
    margin-top: 10px;
  }
  .info{
    flex: 5;
  }
  .up,.down{
    margin-left: 10px;
    margin-top: 5px;
  }
  .down{
    margin-top: 10px;
  }
  .name{
    font-size: 25px;
  }
  .tel{
    margin-left: 10px;
  }
  .address{
    word-break: break-all;
  }
</style>
